<template>
    <div class="release-center">
        <div class="release-list">
           <el-table
                :data="release.list"
                border>
                <el-table-column type="expand">
                    <template #default="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="信息核实查询需求:">
                            <span>{{ props.row.TaskNote }}</span>
                        </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="taskType"
                    align="center"
                    width="200px"
                    label="公证业务">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="信息核实查询需求">
                    <template #default="scope">
                        <p>{{scope.row.TaskNote.slice(0,10)}} {{scope.row.TaskNote.length > 10 ? '...' : ''}}  </p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="price"
                    align="center"
                    width="80px"
                    label="出价/元">
                </el-table-column>
                <el-table-column
                    prop="userName"
                    align="center"
                    width="100px"
                    label="发布人">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    align="center"
                    width="180px"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    align="center"
                    width="180px"
                    label="更新时间">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="name"
                    width="100px"
                    label="状态">
                     <template #default="scope">
                         <el-tag size="small" type="success">{{ taskStatus[scope.row.status] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    width="150px"
                    label="操作">
                    <template #default="scope">
                        <el-button :disabled='scope.row.userID === userId' size="small"  type="primary" @click="userReceiveTask(scope.row.id)">领取任务</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, toRaw, reactive } from 'vue';
import { useStore } from 'vuex';
import { TASK_STATUS } from '@/config'
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
    name: 'ReleaseCenter',
    components: {},
    setup() {
        const store = useStore();
        const release = reactive({
            list: []
        });
        // 获取我的发布列表
        const getTaskList = async() => {
            const data = await store.dispatch('task/getTaskList');
            release.list = data;
        }
        const taskStatus = computed(() => {
            return TASK_STATUS;
        });
        const userReceiveTask = async(taskID) => {
            await store.dispatch('task/userReceiveTask', { taskID });
            ElMessage.success('任务领取成功！赶快去<接受核验需求>列表内查看吧');
            getTaskList();
        };
        const userId = computed(() => {
            return store.getters.userInfo.id;
        });
        onMounted(() => {
            getTaskList();
        })
        return {
            release,
            userId,
            taskStatus,
            userReceiveTask
        }
    }
})
</script>
<style lang="scss" scoped>
.release-center {
    .release-btns {
        @extend %container;
    }
    .release-list {
        @extend %container;
        margin-top: 10px;
    }
    .table-expand {
        .el-form-item {
            margin-bottom: 10px;
            .el-rate {
                margin: 10px 0;
            }
        }
    }
}
</style>